<template>
  <div class="swgk">
    <div class="echatTab">
      <div
        v-for="(item, index) in listDatail"
        :class="{ selectTab: index === num }"
        @click="tabClick(index)"
      >
        {{ item }}
      </div>
    </div>
    <div class="echatTabMain">
      <div class="echatTabMainLi">
        <p
          v-for="(item, index) in listTitle[num]"
          @click="details(index)"
        >
          {{ item.swTitle }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listDatail: ['新闻', '政策'],
      listTitle: [[{
        id: 1,
        swTitle: '微软微软发'
      },{
        id: 1,
        swTitle: '微软微软发'
      },{
        id: 1,
        swTitle: '微软微软发'
      },{
        id: 1,
        swTitle: '微软微软发'
      }],[
        {
        id: 1,
        swTitle: '微软微软发2'
      },{
        id: 1,
        swTitle: '微软微软发2'
      },{
        id: 1,
        swTitle: '微软微软发2'
      },{
        id: 1,
        swTitle: '微软微软发2'
      },{
        id: 1,
        swTitle: '微软微软发2'
      }
      ]],
      num: 0,
    };
  },
  created() {
    // this.getTitle()
  },
  methods: {
    
    tabClick(index) {
      this.num = index;
    },
    details(index) {
      let id = this.listTitle[this.num][index].id
      // this.$emit("infoClick", id);
      console.log(id);
    },
  },
};
</script>

<style lang="scss" scoped>
.swgk {
  height: 100%;
}
.echatTab {
  display: flex;
  justify-content: space-around;
  margin-top: 0.3125rem;
  div {
    font-size: 0.875rem;
    cursor: pointer;
  }
  .selectTab {
    color: #48ece7;
  }
}
.echatTabMain {
  height: calc(100% - 1.25rem);
  overflow: auto;
  margin-top: 0.3125rem;
  padding: 0 1.25rem;
  .echatTabMainLi {
    height: 100%;
    // display: none;
    p {
      margin: 0;
      line-height: 1.5625rem;
      cursor: pointer;
      font-size: 0.875rem;
      line-height: 1.875rem;
    }
  }
  .echartshow {
    display: block;
  }
}
</style>